<template>
	<div class="cus">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px" @close="clean">
			<el-form ref="itemVersionDialogFormRef" :rules="rules" :model="state.ruleForm" size="default" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="版本" prop="version">
							<el-input v-model="state.ruleForm.version"></el-input>
						</el-form-item>
					</el-col>
					<el-divider :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" content-position="center">编译信息 </el-divider>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="git地址" prop="gitUrl">
							<el-select
								style="width: 100%"
								v-model="state.ruleForm.gitUrl"
								filterable
								remote
								:reserve-keyword="true"
								placeholder="请输入关键词"
								:remote-method="remoteMethod"
								@change="handleGitUrlChange"
							>
								<el-option
									v-for="item in state.gitlabRepoOptions"
									:key="item.project_http_url"
									:label="item.project_http_url"
									:value="item.project_http_url"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="密码id" prop="credential">
							<el-select v-model="state.ruleForm.gitCredentialId" placeholder="请选择凭据" style="width: 100%">
								<el-option
									v-for="item in state.gitCredentialIdOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="编译工具" prop="toolVersion">
							<el-select multiple v-model="state.ruleForm.toolVersion" class="filter-item" placeholder="请选择" style="width: 100%">
								<el-option v-for="item in toolVersionOptions" :key="item.key" :label="item.displayName" :value="item.key" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="执行目录" prop="execDir">
							<el-input v-model="state.ruleForm.execDir"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="制品" prop="archive">
							<el-input v-model="state.ruleForm.archive"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="编译命令" prop="compileCommand">
							<el-input type="textarea" :rows="2" v-model="state.ruleForm.compileCommand"></el-input>
							<!--							<CodeEditor v-model="state.ruleForm.compileCommand" language="shell" style="height: 80px"></CodeEditor>-->
						</el-form-item>
					</el-col>
					<template v-if="state.dialog.operatorNode.data.deployType == 'k8s'">
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="自建Dockerfile" prop="cusDockerfile">
								<el-input type="textarea" :rows="4" v-model="state.ruleForm.cusDockerfile"></el-input>
							</el-form-item>
						</el-col>
						<el-divider :xs="24" :sm="24" :md="24" :lg="24" :xl="24" content-position="center">配置</el-divider>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="配置" prop="deployConfig">
								<el-input type="textarea" :rows="4" v-model="state.ruleForm.deployConfig"></el-input>
								<!--							<CodeEditor v-model="state.ruleForm.deployConfig" language="yaml" style="height: 150px"></CodeEditor>-->
							</el-form-item>
						</el-col>
					</template>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="itemVersionDialog">
import { reactive, onMounted, ref } from 'vue';

// const CodeEditor = defineAsyncComponent(() => import('/@/components/Monaco/MonacoEditor.vue'));
import { ElMessage } from 'element-plus';
import { itemApi } from '/@/api/item';
import { itemVersionApi } from '/@/api/itemVersion';
import { credentialApi } from '/@/api/jenkins/credential';

const itemVersionDialogFormRef = ref();

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

const toolVersionOptions = [
	{ key: 'jdk8', displayName: 'jdk8' },
	{ key: 'jdk11', displayName: 'jdk11' },
	{ key: 'maven', displayName: 'maven' },
	{ key: 'node14.15', displayName: 'node14.15' },
	{ key: 'node16.16', displayName: 'node16.16' },
];

const rules = reactive({
	version: [{ required: true, message: '版本必填', trigger: 'blur' }],
	gitUrl: [{ required: true, message: 'git地址必填', trigger: 'blur' }],
	archive: [{ required: true, message: '制品必填', trigger: 'blur' }],
	compileCommand: [{ required: true, message: '编译命令必填', trigger: 'blur' }],
	deployConfig: [{ required: true, message: '配置必填', trigger: 'blur' }],
});

const state = reactive({
	gitlabRepoOptions: [
		{
			"project_http_url": ""
		}
	],
	gitCredentialIdOptions: [
		{
			label:"",
			value: ""
		}
	],
	ruleForm: {
		id: undefined,
		version: '',
		itemId: undefined,
		gitUrl: '',
		gitlabId: undefined,
		gitCredentialId: '',
		toolVersion: [],
		execDir: '',
		compileCommand: '',
		archive: '',
		cusDockerfile: '',
		deployConfig: '',
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
		operatorNode: undefined,
		operatorItemVersion: undefined,
	},
});

// 打开弹窗
const openDialog = async (type: string, clickNode?: any, itemversion?: any) => {
	if (type === 'edit') {
		state.dialog.title = '修改版本';
		state.dialog.submitTxt = '修 改';
		state.ruleForm = itemversion;
	} else if (type === 'copy') {
		itemversion.id = undefined;
		itemversion.version = '';
		state.dialog.title = '复制版本';
		state.dialog.submitTxt = '复 制';
		state.ruleForm = itemversion;
	} else {
		state.dialog.title = '新增版本';
		state.dialog.submitTxt = '新 增';
	}
	state.ruleForm.itemId = clickNode.data.id;
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
	state.dialog.operatorNode = clickNode;
	state.dialog.operatorItemVersion = itemversion;
};

// 清空表单
const clean = () => {
	state.ruleForm = {
		id: undefined,
		version: '',
		itemId: undefined,
		gitUrl: '',
		gitlabId: undefined,
		credential: '',
		toolVersion: [],
		execDir: '',
		compileCommand: '',
		archive: '',
		cusDockerfile: '',
		deployConfig: '',
	};
};

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

// 提交
const onSubmit = () => {
	itemVersionDialogFormRef.value.validate((valid: boolean) => {
		if (valid) {
			itemVersionApi()
				.addOrUpdateItemVersion(state.ruleForm)
				.then(() => {
					ElMessage.success('保存成功');
					closeDialog(); // 关闭弹窗
					emit('refresh', state.dialog.operatorNode.data);
				})
				.catch((err) => {
					ElMessage.error(err.msg);
				});
		}
	});
};

// 获取凭据选项
const getCredentialOptions = () => {
	credentialApi()
		.getCredentialOptions()
		.then((res) => {
			state.gitCredentialIdOptions = res.data;
		})
		.catch((err) => {
			ElMessage.error(err.msg);
		});
};

// 页面加载时
onMounted(() => {
	getCredentialOptions();
});

// 暴露变量
defineExpose({
	openDialog,
});

const remoteMethod = (query) => {
	if (query !== '') {
		const d = {
			text: query,
		};
		itemApi()
			.searchGitlabRepos(d)
			.then((res) => {
				state.gitlabRepoOptions = res.data;
			})
			.catch((err) => {
				ElMessage.error(err.msg);
			});
	} else {
		state.gitlabRepoOptions = [];
	}
};

const handleGitUrlChange = (value) => {
	let index = state.gitlabRepoOptions.findIndex((obj) => obj.project_http_url === value);
	state.ruleForm.gitlabId = state.gitlabRepoOptions[index].project_id;
};
</script>

<style lang="scss" scoped>
.cus:deep(.el-overlay .el-overlay-dialog) {
	align-items: normal;

	.el-dialog {
		margin: 15vh auto !important;
	}
}
</style>
